<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
	<title>bootstap后台练习1</title>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/b3-demo2-index.css">
</head>
<body>
<!-- 这是导航部分 -->
<nav class="navbar navbar-default mynavbar">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Maizi Admin</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav mynavbar-left">
        <li class="active"><a href="boothoutai.html"><span class="glyphicon glyphicon-home"></span>后台首页</a></li>
        <li><a href="boothoutai-user.html"><span class="glyphicon glyphicon-user"></span>用户管理</a></li>
        <li><a href="boothoutai-content.html"><span class="glyphicon glyphicon-list-alt"></span>内容管理</a></li>
        <li><a href="boothoutai-tag.html"><span class="glyphicon glyphicon-tags"></span>标签管理</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">admin<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp&nbsp前台首页</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp&nbsp个人主页</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp&nbsp个人设置</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp&nbsp账户中心</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp&nbsp我的收藏</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp&nbsp退出</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- 这是导航部分 -->

<!-- 主要部分 -->
<main class="mainpart">
	<div class="container">
		<section class="warnpart">
			<div class="alert alert-danger alert-dismissible fade in">
  				<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
  				<strong>网站程序有漏洞，急需修复！</strong>
  				<p>当前版本程序(V1.22)存在严重安全问题，容易造成攻击，请即可修复！</p>
  				<button class="btn btn-danger">立即修复</button>
  				<button class="btn btn-default">稍后处理</button>
			</div>
		</section>
		<section class="datapart">
			<div class="row">
				<div class="col-md-6">
					<div class="panel panel-default website1">
  						<div class="panel-heading">
  						  <h3 class="panel-title" style="font-size: 14px;">网站数据统计</h3>
  						</div>
  						<div class="panel-body">
							<table class="table table-hover">
								<thead>
									<tr>
										<th>统计项目</th>
										<th>今日</th>
										<th>昨日</th>
									</tr>
								</thead>
								<tbody class="mytbody">
									<tr>
										<td>注册会员</td>
										<td>200</td>
										<td>400</td>
									</tr>
									<tr>
										<td>注册会员</td>
										<td>200</td>
										<td>400</td>
									</tr>
									<tr>
										<td>注册会员</td>
										<td>200</td>
										<td>400</td>
									</tr>
									<tr>
										<td>注册会员</td>
										<td>200</td>
										<td>400</td>
									</tr>
								</tbody>
							</table>  				
  						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default website2">
  						<div class="panel-heading">
  						  <h3 class="panel-title" style="font-size: 14px;">网站热帖</h3>
  						</div>
  						<div class="panel-body">
  							<ul class="list-group my-list-group">
  								<li class="list-group-item clearfix">
  									<a href="#">
  									<span class="glyphicon glyphicon-list-alt"></span>
  									&nbsp&nbsp泛Mooc职业教育， 效果和就业为王
  									<span class="pull-right">2017/12/20</span>
  									</a>
  								</li>
  								<li class="list-group-item clearfix">
  									<a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp&nbsp泛Mooc职业教育， 效果和就业为王</a>
  									<span class="pull-right">2017/12/20</span>
  								</li>
  								<li class="list-group-item clearfix">
  									<a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp&nbsp泛Mooc职业教育， 效果和就业为王</a>
  									<span class="pull-right">2017/12/20</span>
  								</li>
  								<li class="list-group-item clearfix">
  									<a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp&nbsp泛Mooc职业教育， 效果和就业为王</a>
  									<span class="pull-right">2017/12/20</span>
  								</li>
  								<li class="list-group-item clearfix">
  									<a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp&nbsp泛Mooc职业教育， 效果和就业为王</a>
  									<span class="pull-right">2017/12/20</span>
  								</li>
  								<li class="list-group-item clearfix">
  									<a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp&nbsp泛Mooc职业教育， 效果和就业为王</a>
  									<span class="pull-right">2017/12/20</span>
  								</li>
							</ul>	
  						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default website3">
  						<div class="panel-heading">
  						  <h3 class="panel-title" style="font-size: 14px;">今日访客统计</h3>
  						</div>
  						<div class="panel-body">
  							<div class="col-md-12">
  								<canvas id="mychart"></canvas>
  							</div>
  						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="panel panel-default website4">
  						<div class="panel-heading">
  						  <h3 class="panel-title" style="font-size: 14px;">服务器状态</h3>
  						</div>
  						<div class="panel-body">
  							<div class="fuwuqi-item">
  								<p>内存使用率:<span>40%</span></p>
  								<div class="progress">
 	 								<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 40%">
  									</div>
								</div>
  							</div>
  							<div class="fuwuqi-item">
  								<p>数据库使用率:<span>20%</span></p>
  								<div class="progress">
  									<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 20%">
  									</div>
								</div>
  							</div>
  							<div class="fuwuqi-item">
  								<p>磁盘使用率:<span>60%</span></p>
  								<div class="progress">
  									<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 60%">
 								 	</div>
								</div>
  							</div>
  							<div class="fuwuqi-item">
  								<p>CPU使用率:<span>80%</span></p>
  								<div class="progress">
  									<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" style="width: 80%">
  									</div>
								</div>
  							</div>
  						</div>
					</div>
				</div>
				<div class="col-md-12">
					<div class="panel panel-default website3">
  						<div class="panel-heading">
  						  <h3 class="panel-title" style="font-size: 14px;">团队留言板</h3>
  						</div>
  						<div class="panel-body">
  							<div class="col-md-7">
  								<ul class="media-list">
  									<li class="media well">
  									  <div class="media-left">
  									    <a href="#">
  									      <img class="media-object w64" src="img/a.png" alt="...">
  									    </a>
  									  </div>
  									  <div class="media-body">
  									    <h4 class="media-heading">卓大哥</h4>
  									    <p>技术大哥，今晚请把网站程序升级一下哈，现在的系统有漏洞，安全起见！</p>
  									  </div>
  									</li>
  									<li class="media well">
  									  <div class="media-body text-right">
  									    <h4 class="media-heading">技术大哥</h4>
  									    <p>收到，今晚凌晨2点准时升级！</p>
  									  </div>
  									  <div class="media-right">
  									    <a href="#">
  									      <img class="media-object w64" src="img/b.png" alt="...">
  									    </a>
  									  </div>
  									</li>
  									<li class="media well">
  									  <div class="media-body text-right">
  									    <h4 class="media-heading">技术大哥</h4>
  									    <p>你先在站点发布一下通知哈！</p>
  									  </div>
  									  <div class="media-right">
  									    <a href="#">
  									      <img class="media-object w64" src="img/b.png" alt="...">
  									    </a>
  									  </div>
  									</li>
  									<li class="media well">
  									  <div class="media-left">
  									    <a href="#">
  									      <img class="media-object w64" src="img/a.png" alt="...">
  									    </a>
  									  </div>
  									  <div class="media-body">
  									    <h4 class="media-heading">卓大哥</h4>
  									    <p>好嘞。</p>
  									  </div>
  									</li>
								</ul>
  							</div>
  							<div class="col-md-5">
  								<div class="letmesspart">
  									<form action="#" method="#">
  										<p>输入留言内容</p>
  										<textarea class="form-control" rows="4"></textarea>
  										<button class="btn btn-default">留言</button>
  									</form>	
  								</div>
  								<div class="panel panel-default website4">
  									<div class="panel-heading">
  									  <h3 class="panel-title" style="font-size: 14px;">团队联系手册</h3>
  									</div>
  									<div class="panel-body">
  										<ul class="list-group">
  											<li class="list-group-item">站长(李小龙):
  												<span><span class="glyphicon glyphicon-phone"></span>&nbsp13134848615</span>
  											</li>
  											<li class="list-group-item">站长(李小龙):
  												<span><span class="glyphicon glyphicon-phone"></span>&nbsp13134848615</span>
  											</li>
  											<li class="list-group-item">站长(李小龙):
  												<span><span class="glyphicon glyphicon-phone"></span>&nbsp13134848615</span>
  											</li>
  											<li class="list-group-item">站长(李小龙):
  												<span><span class="glyphicon glyphicon-phone"></span>&nbsp13134848615</span>
  											</li>
  											<li class="list-group-item">站长(李小龙):
  												<span><span class="glyphicon glyphicon-phone"></span>&nbsp13134848615</span>
  											</li>
										</ul>
  									</div>
								</div>
  							</div>
  						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</main>
<!-- 主要部分 -->


<!-- 底部部分 -->
 <footer class="footpart">
 	<p class="text-center">Copyright © 2012-2015  www.maiziedu.com  蜀ICP备13014270号-4</p>
 </footer>
<!-- 底部部分 -->


<script src="lib/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lib/Chart.js"></script>
<script>
var lineChartData = {
    //X坐标数据
    labels : ["周一","周二","周三","周四","周五","周六","周末"],
    datasets : [
        {
            //统计表的背景颜色
            fillColor : "rgba(0,0,255,0.5)",
            //统计表画笔颜色
            strokeColor : "#f60",
            //点的颜色
            pointColor : "#000;",
            //点边框的颜色
            pointStrokeColor : "red",
            //鼠标触发时点的颜色
            pointHighlightFill : "red",
            //鼠标触发时点边框的颜色
            pointHighlightStroke : "#000",
            //Y坐标数据
            data : [300,555,655,714,899,905,1000]
        },{
            fillColor : "rgba(0,255,0,0.5)",
            strokeColor : "rgba(92, 184, 92, 1)",
            pointColor : "rgba(23, 126, 23, 1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [314,455,755,814,999,905,1000]
        }
        ,{
            fillColor : "rgba(255,0,0,0.5)",
            strokeColor : "blue",
            pointColor : "rgba(23, 126, 23, 1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [114,255,455,414,599,605,500]
        }
    ]

}

window.onload = function(){
    var ctx = document.getElementById("mychart").getContext("2d");
  	var mychart = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}
</script>
</body>
</html>